實際應用table
https://penguincarryu.github.io/PenguinCarryU/
html

<table class="skill-table">
            <tr>
              <td>名稱</td>
              <td>技能</td>
              <td>效果</td>
            </tr>
            <tr>
              <td>恐慌降臨</td>
              <td><img src="images\skills\wraith\wraith (1).png" alt="隱鬼30等技能"  /></td>
              <td>處於你的恐懼範圍內的逃生者。
                  在修理、治療或破壞時觸發技能檢驗的機率提高10%。
                  觸發的技能檢驗的成功區域縮小40/50/60 %。</td>
            </tr>
            <tr>
              <td>所向無敵（快踹）</td>
              <td><img src="images\skills\wraith\wraith (2).png" alt="隱鬼35等技能"  /></td>
              <td>破壞板子和發電機的速度增加10/15/20 %。</td>
            </tr>
            <tr>
              <td>欣喜若狂（大嘴）</td>
              <td><img src="images\skills\wraith\wraith (3).png" alt="隱鬼40等技能"  /></td>
              <td>當你抱著逃生者時
                  移動速度會增加6/12/18 %。
                  你的恐懼範圍會增加12米。</td>
            </tr>
          </table>

css

.skill-table {
  border-collapse: collapse; /* 合并边框 */
  width: 95%; /* 表格宽度占满容器 */
  border: 1px solid #ccc; /* 表格边框样式 */
}

.skill-table td {
  border: 1px solid #ccc; /* 单元格边框样式 */
  padding: 8px; /* 单元格内边距 */
  background-color: #f0f0f0; /* 表头背景色 */
}

.skill-table th {
  border: 1px solid #ccc; /* 单元格边框样式 */
  padding: 8px; /* 单元格内边距 */
  background-color: #f0f0f0; /* 表头背景色 */
}

.skill-table img {
  max-width: 50px; /* 控制技能图标的最大宽度 */
  height: auto; /* 根据宽度自动调整高度，以保持比例 */
}